<template>  
    <el-container>
      <el-header style="height:60px; border-bottom: 1px solid #eee;">  
        <div style="float:left;width:240px;height:50px;font-size: 36px;margin-top:5px">图书信息管理</div>
        <div style="float:left;width:80px;height:30px;text-align:bottom;margin-top:25px">
           <el-button
              size="medium"  type="primary"
              @click="addBook()">增加图书</el-button></div>
      </el-header>

      <el-main>
      <el-table
        :data="tableData.filter(data => !search || data.id.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
        max-height="680"> 
        <el-table-column
          prop="id"
          label="ID"
          min-width="10%">
        </el-table-column>       
        <el-table-column
          prop="bookName"
          label="图书名"
          min-width="15%">
        </el-table-column>

        <el-table-column
          prop="bookType"
          label="图书类型"
          min-width="15%">                 
        </el-table-column>

        <el-table-column
          prop="author"
          label="作者名"
          min-width="15%">                 
        </el-table-column>

        <!-- <el-table-column
          prop="isBorrowed"
          label="是否借出"
          min-width="15%">
        <template #default="{ row }">
          <span v-if="row.isBorrowed===1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column> -->

         <el-table-column min-width="28%" align="center">
         
          <template #default="{ row }">            
            <el-button
              size="medium" type="info"
              @click="handleEdit(row)">
              查看编辑</el-button>
            <el-button
              size="medium"
              type="danger"
              @click="handleDelete(row)">
              删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-main>
          <AddBook @onReload = "addBook" ref="addBook"></AddBook> 
          <EditBook @onReload = "handleEdit" ref="editBook"></EditBook>
    </el-container>  
</template>
<script>
import AddBook from "./addBook.vue"
import EditBook from "./editBook.vue"
export default {
  name: 'BookManager',
  components:{ AddBook,EditBook },
  data() {
    return {  
        loading: false,         
        search: '',  
        tableData: [],               
      }        
   },
  methods: { 
    getAllBook(){ 
      this.$api.post('book/getAllBook', null).then((res) => {                        
        if (res.code === 200) {     
             this.tableData = res.data
            //  alert(this.tableData[1].isBorrowed)
          } else {
            alert('获取图书数据失败!')
          }
          })              
    },
    addBook(){
        //alert('adduser dialog')        
        this.$refs.addBook.dialogFormVisible = true
        this.getAllBook()
    },
   handleEdit(row) {
        //alert(row.username)             
        this.$refs.editBook.dialogFormVisible = true
        this.$refs.editBook.form.id = row.id
        this.$refs.editBook.form.bookName =  row.bookName
        this.$refs.editBook.form.bookType =  row.bookType     
        this.$refs.editBook.form.author =  row.author  
        this.getAllBook();   
    },
    handleDelete(row) {
        this.$confirm('确认删除该图书？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            if (row.isBorrowed === 1) {
                return this.confirmDeleteBorrowedBook(row);
            }
            return this.deleteBook(row);
        }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消删除'
            });
        });
        },
        confirmDeleteBorrowedBook(row) {
            return this.$confirm('该图书已被借出，确定要删除吗？', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
        }).then(() => {
            return this.deleteBook(row);
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });
        },
        deleteBook(row) {
            let data = {
                id: row.id,
                bookName: row.bookName,
                bookType: row.bookType,
                isBorrowed: row.isBorrowed
            };
        return this.$api.post('book/deleteBook', data)
            .then(res => {     
              if (res.code === 200) {                   
                this.getAllBook();            
            }
          })
        }
      },

  
    mounted: function () {     
        this.getAllBook()
    },
    }

</script>
  